<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { StarFilled, User, Pointer, View } from '@element-plus/icons-vue'
import 'element-plus/theme-chalk/display.css'
// 基于准备好的dom，初始化echarts实例
const one = ref(null)
const two = ref(null)
const three = ref(null)
const userCount = ref(1284)
const praiseCount = ref(452)
const viewCount = ref(453453)
const collectCount = ref(636836)
//确保在Dom挂载完成后执行
onMounted(() => {
  const myChart1 = echarts.init(one.value);
  // 绘制图表
  const option1 = ({
    title: {
      text: '功能使用情况'
    },
    tooltip: {},
    xAxis: {
      data: ['饮食', '养生', '锻炼', '社区', '热点']
    },
    yAxis: {},
    series: [
      {
        name: '使用次数/k',
        type: 'bar',
        data: [
          {
            value: 142, itemStyle: { color: '#8B658B' }
          },
          {
            value: 50, itemStyle: { color: '#FF8247' }
          },
          {
            value: 88, itemStyle: { color: '#3CB371' }
          },
          {
            value: 96, itemStyle: { color: '#00B2EE' }
          },
          {
            value: 44, itemStyle: { color: '#FFDAB9' }
          }
        ]
      }
    ]
  });
  myChart1.setOption(option1)
  const myChart2 = echarts.init(two.value);
  const option2 = {
    title: {
      text: '用户增长趋势'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '5%',
      left: 'center'
    },
    series: [
      {
        name: '活跃度',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '高活跃' },
          { value: 735, name: '中活跃' },
          { value: 580, name: '不活跃' },
          { value: 484, name: '低活跃' }
        ]
      }
    ]
  };
  myChart2.setOption(option2)
  const myChart3 = echarts.init(three.value);
  const option3 = {
    title: {
      text: '用户增长趋势'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['用户数量']
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '3月', '5月', '7月', '9月', '11月', '12月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '用户数量',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 135, 140, 157, 166, 210]
      }
    ]
  };
  myChart3.setOption(option3)
})


</script>
<template>
  <!--element-plus自动导入组件(子组件)  -->
  <PageContainer title="控制台">
    <el-row :gutter="26">
      <el-col :span="6">
        <div class="grid-content">用户数量<div class="top">{{ userCount }}</div>
          <el-icon>
            <User />
          </el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">点赞数量<div class="top">{{ praiseCount }}</div>
          <el-icon>
            <Pointer />
          </el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">浏览数量<div class="top">{{ viewCount }}</div>
          <el-icon>
            <View />
          </el-icon>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">收藏数量
          <div class="top">{{ collectCount }} </div>
          <el-icon>
            <StarFilled />
          </el-icon>
        </div>
      </el-col>
    </el-row>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="main" style="margin-top: 60px;">
      <el-row>
        <el-col :span="7" style="margin-left: 35px;">
          <div ref="one" style="width: 410px;height:420px;"></div>
        </el-col>
        <el-col :span="7">
          <div ref="two" style="width: 410px;height:420px;">你好</div>
        </el-col>
        <el-col :span="7" style="padding-right: 10px;">
          <div ref="three" style="width: 410px;height:420px;"></div>
        </el-col>
      </el-row>
    </div>
  </PageContainer>
</template>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  position: relative;
  color: white;
  font-style: italic;
  font-size: 18px;
  border-radius: 10px;
  min-height: 100px;
  padding: 22px;
  padding-left: 30px;
  box-shadow: 0 15px 35px rgba(53, 172, 202, 0.6);
  background: linear-gradient(100deg, #46daad, #5eb8db);
}

.top {
  font-weight: 700;
  font-size: 36px;
  font-style: normal;
  margin-top: 4px;
}

.el-icon {
  position: absolute;
  font-size: 44px;
  right: 10%;
  top: 20%;
}

.main .el-col {
  width: 480px;
  height: 480px;
  border-radius: 15px;
  box-shadow: 2px 2px 2px 2px rgba(21, 179, 144, 0.6);
  margin-right: 50px;
}
</style>
